<template>
  <router-layout>
    <div class="accept">
      <!-- <TitleItem v-if="this.wx==true"></TitleItem> -->
      <van-tabs color="#01A0EF">
        <van-tab title="我认可的">
          <Nodata v-if="myList.length === 0"></Nodata>
          <van-list v-else v-model="loading" :finished="finished" @load="onLoad" :offset="300">
            <van-cell v-for="item in myList" :key="item.id">
              <div class="list van-hairline--bottom">
                <div class="date">
                  <div class="date_time">
                    <p style="margin-right: 10px;">{{item.create_time}}</p>
                    <p>{{item.approvetype_name}}</p>
                  </div>
                  <div class="likeName">
                    <p>认可人：{{item.user_name}}</p>
                  </div>
                </div>
                <div class="vome">
                  <p>{{item.like_reason}}</p>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="认可我的">
          <Nodata v-if="otherList.length === 0"></Nodata>
          <van-list v-else v-model="loading" :finished="finished" @load="onLoad" :offset="300">
            <van-cell v-for="item in otherList" :key="item.id">
              <div class="list van-hairline--bottom">
                <div class="date">
                  <div class="date_time">
                    <p style="margin-right: 10px;">{{item.create_time}}</p>
                    <p>{{item.approvetype_name}}</p>
                  </div>
                  <div class="likeName">
                    <p>认可人：{{item.user_name}}</p>
                  </div>
                </div>
                <div class="vome">
                  <p>{{item.like_reason}}</p>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </router-layout>
</template>
<script>
import { listMyLikeRecord, listLikeMyRecord } from "@/api/admin";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import view_title from "../../components/public/title/title";

export default {
  name: "component_name",
  components: { Nodata, view_title },
  data() {
    return {
      loading: false,
      finished: false,
      otherList: [],
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId")
      },
      myList: []
    };
  },
  methods: {
    async myLike() {
      //我认可别人的
      let query = Object.assign({}, this.listQuery);
      let { data } = await listMyLikeRecord(query);
      if (data.status == 100) {
        this.myList = data.data.rows;
      }
      this.loading = false;
      if (data.data.results <= this.myList.length) {
        this.finished = true;
      }
    },
    async otherLike() {
      //别人认可我的
      let query = Object.assign({}, this.listQuery);
      let { data } = await listLikeMyRecord(query);
      if (data.status == 100) {
        this.otherList = data.data.rows;
      }
      this.loading = false;
      if (data.data.results <= this.myList.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.otherLike();
        this.myLike();
      }, 1000);
    }
  },
  created: function() {
    this.myLike();
    this.otherLike();
  }
};
</script>
<style lang="scss" scoped>
.list {
  padding: 10px 0;
  .date {
    display: flex;
    justify-content: space-between;
    .date_time {
      display: flex;
      font-size: 14px;
      font-weight: 700;
    }
  }
  .vome {
    font-size: 12px;
    color: #a0a0a0;
  }
}
</style>
